<template>
  <view
    class="category-card"
    :style="{ backgroundColor: category.color }"
    @click="handleClick"
  >
    <!-- 图标和基本信息 -->
    <view class="card-header">
      <view class="icon-wrapper">
        <text class="icon">{{ getCategoryIcon(category.icon) }}</text>
      </view>
      <view class="info">
        <text class="name">{{ category.name }}</text>
        <text class="count">{{ category.account_count || 0 }} 个账号</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view v-if="showActions" class="card-actions">
      <view class="action-btn" @click.stop="handleEdit">
        <text class="action-icon">✏️</text>
      </view>
      <view class="action-btn" @click.stop="handleDelete">
        <text class="action-icon">🗑️</text>
      </view>
    </view>

    <!-- 系统分类标识 -->
    <view v-if="category.is_system" class="system-badge">
      <text>系统</text>
    </view>

    <!-- 不活跃状态遮罩 -->
    <view v-if="!category.is_active" class="inactive-mask">
      <text class="inactive-text">已停用</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Category } from '@/api/category'

interface CategoryCardProps {
  category: Category
  showActions?: boolean
}

interface CategoryCardEmits {
  (event: 'click', category: Category): void
  (event: 'edit', category: Category): void
  (event: 'delete', category: Category): void
}

const props = withDefaults(defineProps<CategoryCardProps>(), {
  showActions: false
})

const emit = defineEmits<CategoryCardEmits>()

// 计算属性
const cardStyle = computed(() => {
  const baseStyle = {
    backgroundColor: props.category.color || '#f0f0f0',
    opacity: props.category.is_active ? 1 : 0.6
  }

  // 根据颜色亮度调整文字颜色
  const color = props.category.color || '#f0f0f0'
  const brightness = getBrightness(color)

  return {
    ...baseStyle,
    '--text-color': brightness > 128 ? '#333' : '#fff',
    '--text-color-secondary': brightness > 128 ? '#666' : 'rgba(255, 255, 255, 0.8)'
  }
})

// 获取分类图标
const getCategoryIcon = (iconName?: string): string => {
  const iconMap: Record<string, string> = {
    'social': '👥',
    'shopping': '🛒',
    'work': '💼',
    'finance': '💰',
    'entertainment': '🎮',
    'education': '📚',
    'health': '🏥',
    'travel': '✈️',
    'food': '🍔',
    'sports': '⚽',
    'music': '🎵',
    'photo': '📷',
    'tools': '🔧',
    'security': '🔒',
    'communication': '📞',
    'news': '📰',
    'weather': '🌤️',
    'maps': '🗺️',
    'productivity': '📊',
    'lifestyle': '🌟',
    'other': '📁'
  }

  return iconMap[iconName || 'other'] || '📁'
}

// 计算颜色亮度
const getBrightness = (color: string): number => {
  // 移除 # 号
  const hex = color.replace('#', '')

  // 转换为 RGB
  const r = parseInt(hex.substr(0, 2), 16)
  const g = parseInt(hex.substr(2, 2), 16)
  const b = parseInt(hex.substr(4, 2), 16)

  // 计算亮度
  return (r * 299 + g * 587 + b * 114) / 1000
}

// 处理点击
const handleClick = () => {
  if (props.category.is_active) {
    emit('click', props.category)
  }
}

// 处理编辑
const handleEdit = () => {
  emit('edit', props.category)
}

// 处理删除
const handleDelete = () => {
  if (props.category.is_system) {
    uni.showToast({
      title: '系统分类不能删除',
      icon: 'none'
    })
    return
  }

  emit('delete', props.category)
}
</script>

<style lang="scss" scoped>
.category-card {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  overflow: hidden;

  &:active {
    transform: scale(0.98);
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .icon-wrapper {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        font-size: 20px;
      }
    }

    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      .name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1.2;
      }

      .count {
        font-size: 12px;
        color: var(--text-color-secondary);
        opacity: 0.8;
      }
    }
  }

  .card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;

    .action-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;

      &:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.3);
      }

      .action-icon {
        font-size: 12px;
      }
    }
  }

  .system-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;

    text {
      font-size: 10px;
      color: var(--text-color);
      opacity: 0.8;
    }
  }

  .inactive-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;

    .inactive-text {
      color: white;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
</style>